<template>
    <div>
        <Card>
            <i-form ref="formCustom" :model="formCustom"   :label-width="80" :rules="ruleCustom" inline>
                <Form-item label="消耗" prop="consume">
                    <i-input type="consume" v-model="formCustom.consume"></i-input>
                </Form-item>
                <Form-item label="库存"  prop="inventory">
                    <i-input type="inventory" v-model="formCustom.inventory"></i-input>
                </Form-item>
                <Form-item label="可用天数" prop="availableDays">
                    <i-input type="availableDays" v-model="formCustom.availableDays" number></i-input>
                </Form-item>
            </i-form>
        </Card>

        <div class="submit-button">
            <i-button type="primary" @click="handleSubmit('formCustom')">添加</i-button>
        </div>

        <i-table  border :columns="columns2" :data="data4"></i-table>
        <Page :total="100" :current="1" @on-change="changePage"></Page>
    </div>
</template>

<script>
export default {
  data () {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.formCustom.passwdCheck !== '') {
          // 对第二个密码框单独验证
          this.$refs.formCustom.validateField('passwdCheck')
        }
        callback()
      }
    }
    console.log(validatePass)
    const validatePassCheck = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.formCustom.passwd) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    console.log(validatePassCheck)
    const validateAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('年龄不能为空'))
      }
      // 模拟异步验证效果
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (value < 18) {
            callback(new Error('必须年满18岁'))
          } else {
            callback()
          }
        }
      }, 1000)
    }
    console.log(validateAge)
    return {
      formCustom: {
        consume: '0',
        inventory: '0',
        availableDays: '0'
      },
      ruleCustom: {
        consume: [
          { required: true, message: '请输入消耗', trigger: 'blur' }
        ],
        inventory: [
          { required: true, message: '请输入库存', trigger: 'blur' }
        ],
        availableDays: [
          { required: true, message: '请输入可用天数', trigger: 'blur' }
        ]
      },
      columns2: [
        {
          title: '日期',
          key: 'date',
          align: 'center'
        },
        {
          title: '消耗',
          key: 'consume',
          align: 'center'
        },
        {
          title: '库存',
          key: 'inventory',
          align: 'center'
        },
        {
          title: '可用天数',
          key: 'availableDays',
          align: 'center'
        }
      ],
      data4: []
    }
  },
  mounted () {
    const data = []
    for (let i = 0; i < 10; i++) {
      data.push({
        key: i,
        date: new Date().toLocaleDateString(),
        consume: i + 45,
        inventory: i + 68,
        availableDays: i + 15

      })
    }
    this.data4 = data
  },
  methods: {
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('提交成功!')
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    }
  }
}
</script>

<style scoped>

</style>

<style>
    .submit-button{
        display: flex;
        justify-content: flex-end;
        margin: 10px 0 ;
    }
</style>
